<template>
	<view class="banner">
		<view class="banimg">
			<van-swipe :autoplay="3000" lazy-render>
			  <van-swipe-item v-for="image in images" :key="image">
			    <img :src="image.pic" />
			  </van-swipe-item>
			</van-swipe>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted} from 'vue'
	import { reqBannerlist } from '../../../api/index.js'
	const images = ref([])
	onMounted(async()=>{
		let result = await reqBannerlist()
		// console.log(result);
		images.value = result.data.banners
	})
</script>

<style lang="scss" scoped>
	.banner{
		width: 100%;
		height: 300px;
		background:linear-gradient(to right,rgb(233,229,252),rgb(247,229,243)) ;
		overflow: hidden;
		.banimg{
			width: 720px;
			height: 250px;
			margin: 30px auto;
			// border: 1px solid black;
			border-radius:10px ;
			overflow: hidden;
			.van-swipe{
				width: 100%;
				height: 100%;
				.van-swipe-item{
					width: 100%;
					height: 100%;
					>img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.van-swipe__indicator--active{
				background: rgb(219, 130, 130);
			}
		}
	}
</style>